import { Button, Space } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment, incrementAsync } from './counterSlice'

export function Counter() {
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <h3>在天愿作比翼鸟，在地愿为连理枝。</h3>
      <h3>后宫佳丽三千人，三千宠爱在一身。</h3>
      <h3>回眸一笑百媚生，六宫粉黛无颜色。</h3>
      <h4>当前数字为：{count}</h4>
      <Space>
        <Button type="primary" onClick={() => dispatch(increment())}>加1</Button>
        <Button type="primary" onClick={() => dispatch(decrement())}>减1</Button>
        <Button type="primary" onClick={() => dispatch(incrementAsync(1))}>异步加1</Button>
      </Space>
    </div>
  )
}
